<template>
  <div class="shome_m">
    <mt-header fixed title="统计图"></mt-header>
    <h3>时间：</h3>
    <select class="mui-btn mui-btn-block" v-model="onDate">
      <option :value="item" v-for="(item,index) in dateTime" :key="index">{{item}}</option>
    </select>
    <div class="showme">
      <div class="ex_tit tit_s">支出</div>
      <ve-pie :data="chartData"></ve-pie>
      <div class="ic_tit tit_s">收入</div>
      <ve-pie :data="chartDatas"></ve-pie>
    </div>

    <!-- <ve-histogram :data="chartData"></ve-histogram> -->
  </div>
</template>

<script>
export default {
  name: "shome",
  data() {
    return {
      chartData: {
        columns: ["Pitch", "Num"],
        rows: [],
      },
      chartDatas: {
        columns: ["Pitch", "Num"],
        rows: [],
      },
      onDate: "", //默认选中日期
      dateTime: [], //可选日期
      fttbExf: [],
      fttbIcf: [],
    };
  },
  mounted() {
    //获取数据
    let datas = JSON.parse(window.localStorage.getItem("expendF"));
    let datase = JSON.parse(window.localStorage.getItem("incomeF"));
    // this.onDate = [
    //   datas.pop().Time.slice(0, 7),
    //   datase.pop().Time.slice(0, 7),
    // ].pop();
    let dateTimes = [];
    if (datas) {
      this.updateView(this.onDate, "fttbExf", "expendF");
      this.onDate = datas.pop().Time.slice(0, 7);
      datas.forEach((item) => {
        dateTimes.push(item.Time.slice(0, 7));
      });
    }
    if (datase) {
      this.onDate = datase.pop().Time.slice(0, 7);
      this.updateView(this.onDate, "fttbIcf", "incomeF");
      datase.forEach((item) => {
        dateTimes.push(item.Time.slice(0, 7));
      });
    }

    this.dateTime = [...new Set(dateTimes)].sort();
    // this.onDate = this.dateTime[this.dateTime.length-1]
    // console.log(JSON.parse(window.localStorage.getItem('expendF')));
  },
  watch: {
    onDate(val) {
      this.updateView(val, "fttbExf", "expendF");
      this.updateView(val, "fttbIcf", "incomeF");
      this.chartData.rows = this.fttbExf;
      this.chartDatas.rows = this.fttbIcf;
    },
  },
  activated() {
    let ext = JSON.parse(window.localStorage.getItem('expendF'))
    if (ext.length>0) {
      this.onDate = ext.pop().Time.slice(0, 7);
      this.dateTime = [this.onDate];
      // console.log(this.onDate);
    }
    this.updateView(this.onDate, "fttbExf", "expendF");
    this.updateView(this.onDate, "fttbIcf", "incomeF");
    this.chartData.rows = this.fttbExf;
    this.chartDatas.rows = this.fttbIcf;
    
    // console.log(this.fttbExf);
    // console.log(this.fttbIcf);
  },
  methods: {
    updateView(time, target, data) {
      let ex = JSON.parse(window.localStorage.getItem(data));
      if (!ex) return;
      ex = ex.filter((item) => {
        return item.Time.slice(0, 7) == time;
      });
      let exs = [];
      let map = {};
      for (let i = 0; i < ex.length; i++) {
        var ai = ex[i];
        if (!map[ai.Pitch]) {
          exs.push({
            Pitch: ai.Pitch,
            Num: ai.Num,
            Time: ai.Time,
          });
          map[ai.Pitch] = ai.Pitch;
        } else {
          for (let j = 0; j < exs.length; j++) {
            var dj = exs[j];
            if (dj.Pitch == ai.Pitch) {
              dj.Num = dj.Num + ai.Num;
              break;
            }
          }
        }
      }
      this[target] = exs;
    },
  },
};
</script>

<style scope>
.ex_tit {
  background-color: #ff6348;
  box-shadow: 0px 2px #eccc68;
}
.tit_s {
  width: 80%;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  opacity: 0.8;
  margin: 5px auto;
  height: 25px;
  line-height: 25px;
}
.ic_tit {
  background-color: #2ed573;
  box-shadow: 0px 2px #ced6e0;
}
.mui-btn {
  /* padding: 8px; */
  margin: 3px;
  border: none;
  outline: none;
}
.mui-btn-block {
  font-size: 18px;
  display: inline-block;
  width: 30%;
  /* margin-bottom: 10px; */
  padding: 15px 0;
}
.shome_m h3 {
  display: inline-block;
  margin-top: 40px;
}
</style>